<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        .avatar{
            cursor: pointer;
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
        .list-card{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .list-card-tag{
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 110px;
            font-size: 14px;
            color: #212121;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
        }
        .list-card-tag .tag-small{
            width: 110px;
            font-size: 12px;
            margin: 2px 0;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .list-card-btn{
            color: #999;
            background: #e7e7e7;
            width: 123px;
            line-height: 32px;
            height: 32px;
            text-align: center;
        }
        
    </style>
</head>

<body>
        <div id="demo_x" class="" >
            <div class="list-card">
                <img class="avatar" src="http://db.minfish.com/uc_server/avatar.php?uid=76&amp;size=small">
                <div class="list-card-tag">
                    <div>科技美学</div>
                    <div class="tag-small">Up主</div>
                </div >
                <div class="list-card-btn">已关注 293.2万</div>
            </div>
        </div>
</body>

<!-- 必要 -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/render_somthing.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script>
    {
        var render_somthing_demo_x;
        //render_somthing_demo_x = new render_somthing();
        render_somthing_demo_x.init({
            // div的id
            id: "#demo_x",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
<ul style="padding-left:0px;"></ul>
    `
            },
            // 渲染内容的配置
            content: {
                default: `

`,
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
               # {title}     - 变量，表示数据数组中对象的key
            */
            condition: [
            ],
        })
        //render_somthing_demo_x.render();
    }
</script>

</html>